<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<drag-icon :isDock="true" :existTabBar="true" @btnClick="btnClick"></drag-icon>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">待开票</block>
		</cu-custom>

		<view>
			<view class="queryBox">
				<u-search class="hzuni-search-bar" v-model="keywords" @custom="search" @search="search"></u-search>

			</view>

			<scroll-view class="scroll-list msg-list-item" scroll-y="true" @scrolltolower="getMore"
				:lower-threshold="10" :style="{'height': scrollHeight}">
				<view v-if="total > 0">
					<template v-for="(item,index) in mesgList">
						<view class="msg-time">{{item.dateStr}}</view>
						<u-card class="task-list-item" :border="false" padding="20" margin="10rpx 20rpx">
							<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
								<view style="display: flex;align-items: center;font-size: 30rpx;">
									<image v-if="item.billStatus === 3" class="user-images"
										src="/static/msg/active.png">
									</image>
									<image v-if="item.billStatus === 4" class="user-images"
										src="/static/msg/auditOk.png">
									</image>
									{{item.unit}}
								</view>
								<view style="color: #999999;font-size: 22rpx;">{{item.timeStr}}</view>
							</view>
							<view class="" slot="body" @click="current === 1 ? handleBill(1,item):''">
								<!--  -->
								<u-row gutter="16">
									<u-col span="8">
										<view class="apply-text"><span>开票内容：</span></view>
									</u-col>
								</u-row>
								<u-row gutter="16">
									<u-col span="8">
										<view class="apply-text"><span>开票类型：</span>
										</view>
									</u-col>
								</u-row>
								<u-row gutter="16">
									<u-col span="8">
										<view class="apply-text"><span>项目：</span></view>
									</u-col>
								</u-row>
								<u-row v-if="item.remark" gutter="16">
									<u-col span="8">
										<view class="apply-text"><span>单位：</span></view>
									</u-col>
								</u-row>
								<u-row gutter="16">

									<u-col span="12">
										<view class="apply-text"><span>申请时间：</span></view>
									</u-col>
								</u-row>
							</view>
							<view class="apply-list-foot" slot="foot">
								<u-row gutter="16">
									<u-col span="12" text-align="center">
										<u-button text="查看详情" shape="circle" icon="eye" size="small" type="primary"
											@click="handleBill(1,item)"></u-button>
										<!-- <view class="agree-text">查看详情</view> -->
									</u-col>

								</u-row>
							</view>
						</u-card>
						<have-botton v-if="!more"></have-botton>
					</template>

					<u-divider v-if="!more" text="已经到底了"></u-divider>
				</view>


				<view v-else class="lapp-result-none">
					<img src="http://www.yunzhijia.com/lightapp/images/result-none.png"><span>暂无数据</span>
				</view>
			</scroll-view>
		</view>



	</view>
</template>
<script>
	import dragIcon from '../../components/drag/drag-icon.vue'
	import {
		getTodoAction,
		getUser,
		getCompanyId,
		notificationEvent,
	} from '../../network/service/addressBook.js';
	export default {
		components: {
			dragIcon,
		},
		data() {
			return {
				show: false,



				form: {
					invoiceType: 1,
					invoiceContent: '',
					reason: '',
					remark: '',
				},
				showInvoiceContent: false,


				proInfo: {
					id: '',
					name: '',
					number: '',
				},



				m2mSimflowList: [],
				m2mOrderFlowList: [],
				current: 0,
				status: 'loadmore',
				iconType: 'circle',
				isDot: false,


				topHeight: 0,
				scrollHeight: '',
				total: 0, //总数据量
				amount: 10, //每页数据量
				pageNum: 1, //当前页码
				more: true,
				keywords: '',
				mesgList: [],
				loadText: {
					loadmore: '点击加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
			}
		},
		created() {},
		methods: {
			btnClick() {

			},
			invoiceContentSelect(e) {
				this.form.invoiceContent = e.name
			},
			radioClick(e) {
				console.log("e", e)
				this.radiosPlan = e
			},
			checkError() {
				if (this.form.stampType === 1) {
					if (!this.proInfo) {
						notificationEvent('error', '请选择项目，点击放大镜选择后确认！');
						return false;
					}
					if (this.proInfo && !this.proInfo.id) {
						notificationEvent("error", "请选择项目，点击放大镜选择后确认！");
						return false;
					}

				}
				if (this.form.stampType === 2) {
					if (!this.form.reason) {
						notificationEvent("error", "其他盖章类型时，请填写其他盖章说明！");
						return false;
					}

				}
				return true
			},

			/**
			 * 提交
			 */
			save() {

				const flag = this.checkError()
				if (flag) {
					const params = {
						...this.form,
						proId: this.proInfo.id,
						proNum: this.proInfo.number,
						companyId: getCompanyId(),
						uid: getUser().id,
						createPerson: getUser().person ? getUser().person : "",
					}

					let submitType = {
						url: '/stamp/phoneSave',
						method: 'POST',
						data: params,
					}
					getTodoAction(submitType).then(res => {
						if (res.meta.status !== "000000") {
							notificationEvent("error", "提交用章申请失败：" + res.data.alert_msg);
							return false;

						} else {

							const resData = res.data.list[0]
							this.submitAudit(resData)
						}
					})

				}

			},
			/**
			 * 启动审批
			 * @param {Object} resData
			 */
			submitAudit(resData) {
				const workFlowAuditParam = [];
				workFlowAuditParam.push({
					WorkFlowAuditParamInfo: {
						...resData,
						createUserName: getUser().name
					},
					uid: getUser().id,
				});
				const auditParams = {
					url: '/proceDef/start',
					method: 'POST',
					data: {
						workFlowAuditParam: workFlowAuditParam[0],
						billType: 5, // 用章的审批
						uid: getUser().id,
						createPerson: getUser().person,
						areaId: getUser().areaId,
					},
				}

				getTodoAction(auditParams).then(res => {
					if (res.meta.status !== "000000") {
						notificationEvent("error", "提交用章申请审批失败：" + res.data.alert_msg);
						return false;

					} else {
						notificationEvent("sucess", "提交用章申请成功！");
						this.current = 1
						this.getStampList()
					}
				})
			},

			change(item) {
				this.current = item.index;
				if (this.current === 1) {
					this.getStampList()
				}
				if (this.current === 0) {
					this.form.reason = ''
					this.form.stampType = 1
					this.form.remark = ''
					this.proInfo.id = ''
					this.proInfo.name = ''
					this.proInfo.number = ''
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 处理单据
			handleBill(type, info) {
				this.navTo('/pages/msg/details?viewCode=' + type + '&info=' + JSON.stringify(info))
			},
			// 滚动加载更多
			getMore() {
				if ((this.pageNum - 1) * this.amount >= this.total) {
					this.more = false
					return
				}
				uni.showLoading({
					title: '更多数据正在赶来...'
				})
				// 请求加载的数据

				this.getStampList()
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			},

			//搜索
			search() {
				this.pageNum = 1
				this.mesgList = []
				this.getStampList()
			},

			// 清除搜索框
			clearSearchText() {
				this.keywords = ''
				this.pageNum = 1
				this.mesgList = []
				this.getStampList()
			},

			// 查询信息
			getStampList() {
				this.more = true
				let that = this
				let keyWord = this.keywords
				var url = '/stamp/selectStamp'
				var data = {
					pageNo: that.pageNum,
					pageSize: that.amount,
					companyId: getCompanyId(),
					uid: getUser().id,
					person: getUser().person,
					keyWord,
				}
				let params = {
					url,
					method: 'post',
					data,
				}
				getTodoAction(params).then(res => {
					console.log("erer", res)
					that.total = res.data.total
					that.mesgList = [...that.mesgList, ...res.data.list]
					that.pageNum++

				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none',
						duration: 3000
					});
				})

			},
			selectOpenPro(type) {
				uni.hideKeyboard();
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
				let that = this;

				uni.navigateTo({
					url: '/pages/workbench/SelectInfo',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						selectInformationResult: function(data) {
							that[type] = {
								name: data.data.name,
								id: data.data.id,
								number: data.data.number
							};
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('selectInformation', {
							data: type,
						});
					}
				});
			},
		},
		onReady() {
			let screenW = 0
			let screenH = 0
			uni.getSystemInfo({
				success(res) {
					screenW = res.windowWidth
					screenH = res.windowHeight
				}
			})

			uni.createSelectorQuery().select('.queryBox').boundingClientRect(data => {
				this.topHeight = data && data.height ? data.height : 60
			}).exec()

			this.scrollHeight = (screenH - 80 - this.topHeight) * (750 / screenW) + 'rpx'
		},
	}
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.queryBox {
		background: #ffffff;
		height: 80rpx;

	}

	.hzuni-search-bar {
		flex: 1;
		align-items: center;
		padding: 10rpx !important;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}


	.msg-list-item .lapp-result-none {
		position: absolute;
		top: 30%;
		left: 50%;
		width: 160px;
		margin-left: -80px;
	}

	.msg-list-item .lapp-result-none>img {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0px auto;
	}

	.msg-list-item .lapp-result-none>span {
		display: block;
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		color: rgb(128, 128, 128);
	}

	/deep/ .u-border {
		border-width: 0px !important;
		border-color: #dadbde !important;
		border-style: solid;
		background-color: #F8F7F8;
	}
</style>